<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/userInfo.css">

  <script src="../bootstrap/js/jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../js/element-ui.js"></script>
</head>
<title>视频管理</title>
<body style="background-color: #f4f9fa">
<div id="ulInfo">
  <!-- 导航 -->
  <nav class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="font-size: 16px;">
    <h1 class="title">
      <a class="navbar-brand" href="#">
        <img src="../img/studyLogo.png" alt="logo" width="40" height="40">
      </a>
    </h1>
    <!-- 折叠按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="../main.html">首页</a></li>
        <!--<li class="nav-item"><a class="nav-link" href="collect.html">收藏</a></li>-->
        <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                            href="videoUpload.html">上传视频</a>
        </li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="userManager.html">用户管理</a>
        </li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="functionManager.html">权限管理</a>
        </li>
        <!--下拉-->
        <li class="dropdown" style="margin-right: 450px">
          <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
          <ul class="dropdown-menu" style="text-align: center;">
            <li><a style="color: #6c757d;" href="userInfo.html">个人中心</a></li>
            <li><a style="color: #6c757d;" href="collect.html">我的收藏</a></li>
            <li><a style="color: #6c757d;" href="browse.html">浏览记录</a></li>
            <li><a style="color: #6c757d;" href="../userExit">退出登录</a></li>
          </ul>
        </li>

        <template v-if="currentUser.account == null">
          <li class="nav-item"><a class="nav-link" href="../login.html">你好,请登录</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../register.html">免费注册</a></li>
        </template>
        <template v-if="currentUser.account != null">
          <li class="nav-item"><a class="nav-link" href="userInfo.html">欢迎你：{{currentUser.account}}</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../userExit">退出</a></li>
        </template>
      </ul>
      <form id="formSearch" action="" class="form-inline ml-auto">
        <input id="searchInput" type="text" v-model="keyword" class="form-control mr-sm-2" placeholder="Search"
               @change="searchVideo">
        <input @click="searchVideo" type="button" class="btn btn-outline-secondary  my-2 my-sm-0" value="搜索">
      </form>
    </div>
  </nav>
  <div class="all" style="margin-top: 100px">
    <h2 style="text-align: center;margin-top: 30px;margin-bottom: 30px">
      <el-button style="margin-top: -25px;margin-left: 5px;float: left;" @Click="videoTypeManager">视频类型管理</el-button>
      <span style="margin-left: -131px;">视频管理</span>
    </h2>
    <form action="" id="searchForm" name="searchForm" method="post"
          style="width: 80%;margin-left: 20%">
      <!--搜索框-->
      <div style="height: 66px;background-size: cover;">
        <div style="position: absolute;width:80%;">
          <form class="form-inline ml-auto">
            <input v-model="keyword" type="text" class="fl form-control mr-sm-2"
                   style="width: 400px;height: 50px;margin-left: 120px" placeholder="请输入搜索内容">
            <input @Click="getAllVideo" type="button" class="fl btn btn-outline-secondary  my-2 my-sm-0"
                   style="width: 85px;height: 50px;font-size: 18px" value="搜索">
          </form>
        </div>
      </div>
    </form>
    <span style="margin-left: 60px;color: #a8b5b5;">提示: 双击标题可编辑信息</span>
    <table class="table" id="table" style="margin: 10px auto;width: 90%;font-size: 18px; font-family: '微软雅黑';">
      <tr>
        <th>封面</th>
        <th>类型</th>
        <th>作者</th>
        <th>标题</th>
        <th>状态</th>
      </tr>
      <template v-for="video in videoList.data">
        <tr :vid="video.vid" class="hover">
          <td style="cursor:pointer;" name="editInfo1" editType="headPicUrl1">
            <a :href="'../showVideoDetail?vid='+video.vid">
              <img onclick="editHeadPic(this.parentElement)" id="headpic" name="headpic"
                   width="100px" height="50px" :src="'../upload/'+video.coverUrl" alt="封面">
            </a>
          </td>
          <td ondblclick="edit(this)" editType="type" style="cursor:pointer;vertical-align: inherit;" name="editInfo">
            {{video.type | formatType}}
          </td>
          <td ondblclick="edit(this)" editType="issuer" style="cursor:pointer;vertical-align: inherit;" name="editInfo">
            {{video.videoDetail.issuer}}
          </td>
          <td ondblclick="edit(this)" editType="videoName" style="cursor:pointer;vertical-align: inherit;"
              name="editInfo">
            {{video.videoName}}
            <!--                        <a style="color: #3c3d3f" :href="'../showVideoDetail?vid='+video.vid">《{{video.videoName}}》</a>-->
          </td>
          <td :roleId="video.status" style="cursor:pointer;vertical-align: inherit;" name="editInfo" editType="role">
            <el-select size="small" style="width: 60%;" v-model="video.statusName" :id="video.vid"
                       v-if="video.status == 0"
                       @Change="editRole(video.vid, video.statusName)">
              <el-option label="下架" value="0" selected></el-option>
              <el-option label="免费" value="1"></el-option>
              <el-option label="VIP尊享" value="2"></el-option>
            </el-select>

            <el-select size="small" style="width: 60%;" v-model="video.statusName" :id="video.vid"
                       v-if="video.status == 1"
                       @Change="editRole(video.vid, video.statusName)">
              <el-option label="下架" value="0"></el-option>
              <el-option label="免费" value="1" selected></el-option>
              <el-option label="VIP尊享" value="2"></el-option>
            </el-select>

            <el-select size="small" style="width: 60%;" v-model="video.statusName" :id="video.vid"
                       v-if="video.status == 2"
                       @Change="editRole(video.vid, video.statusName)">
              <el-option label="下架" value="0"></el-option>
              <el-option label="免费" value="1"></el-option>
              <el-option label="VIP尊享" value="2" selected></el-option>
            </el-select>
            <a style="margin-left: 10px;font-size: 15px;" :href="'../showVideoDetail?vid='+video.vid"> 查看 </a>
          </td>
        </tr>
      </template>
    </table>
    <div style="width:60%;margin-left:20%; margin-bottom: 50px;text-align:center;" class="centerdiv">
      <input type="button" value="首  页" class="btnPage" @Click="pageOper('min')" style="margin-left: 20%"/>
      <input type="button" value="上一页" class="btnPage" @Click="pageOper('up')"/>
      第<input type="text" v-model="pageNo" class="btn"
              style="width: 34px;text-align: center;margin-bottom: 4px" @blur="pageOper">页&nbsp;&nbsp;<b>·</b>&nbsp;&nbsp;共
      &nbsp;<span v-text="maxPage"></span>&nbsp; 页
      <input type="button" value="下一页" class="btnPage" @Click="pageOper('down')"/>
      <input type="button" value="尾  页" class="btnPage" @Click="pageOper('max')"/>
    </div>
  </div>

  <el-dialog title="视频类型管理" :visible.sync="videoTypeVisible" width="60%">
    <el-button type="primary" style="margin: 10px;" @click="addVideoTypeManager">新增类型</el-button>
    <el-table :data="videoTypeList" border max-height="300">
      <el-table-column property="typeName" label="类型名称"></el-table-column>
      <el-table-column property="typeId" label="类型编码"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click.native.prevent="editVideoTypeManager(scope.$index, videoTypeList)"
                     size="mini">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog title="新增视频类型" :visible.sync="addVideoTypeVisible">
    <el-form>
      <el-form-item label="类型名称">
        <el-input v-model="addVideoTypeForm.typeName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addVideoTypeVisible = false">取 消</el-button>
      <el-button type="primary" @click="addVideoType">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="编辑视频类型" :visible.sync="editVideoTypeVisible">
    <el-form>
      <el-form-item label="类型编码">
        <el-input v-model="editVideoTypeForm.typeId" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="类型名称">
        <el-input v-model="editVideoTypeForm.typeName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="editVideoTypeVisible = false">取 消</el-button>
      <el-button type="primary" @click="editVideoType">确 定</el-button>
    </div>
  </el-dialog>
</div>
</body>
<script src="../js/diqu2.js"></script>
<script type="text/javascript">
  let message = null
  /*视频信息*/
  new Vue({
    el: "#ulInfo",
    data() {
      return {
        currentUser: "",
        videoList: "",
        dataArray: [],
        keyword: "",
        name: "",
        sex: "",
        pageNo: "1",
        maxPage: "1",
        videoTypeList: [],
        videoTypeVisible: false,
        addVideoTypeForm: {
          typeName: "",
          typeId: ""
        },
        editVideoTypeForm: {
          typeName: "",
          typeId: ""
        },
        addVideoTypeVisible: false,
        editVideoTypeVisible: false,
      }
    },
    methods: {
      addVideoType() {
        if (!this.addVideoTypeForm.typeName) {
          message.error('请输入名称');
          return;
        }
        let existArray = this.videoTypeList.filter(item => item.typeName == this.addVideoTypeForm.typeName) || [];
        if (existArray && existArray.length > 0) {
          message.error('该类型已存在, 请重新输入');
          return;
        }

        const addVideoTypeListLoading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get('../addVideoType?typeName=' + this.addVideoTypeForm.typeName).then(result => {
          addVideoTypeListLoading.close();
          this.getVideoTypeList()
          this.addVideoTypeVisible = false
        }).catch(function (error) {
          addVideoTypeListLoading.close();
          message.error(error.response.data)
          if (error.response.status === 401) window.location.href = "../login.html";
          this.addVideoTypeVisible = false
        });
      },
      editVideoType() {
        if (!this.editVideoTypeForm.typeName) {
          message.error('请输入名称');
          return;
        }
        let existArray = this.videoTypeList.filter(item => item.typeName == this.editVideoTypeForm.typeName) || [];
        if (existArray && existArray.length > 0) {
          message.error('该类型已存在, 请重新输入');
          return;
        }

        const editVideoTypeListLoading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get('../editVideoType?typeName=' + this.editVideoTypeForm.typeName + "&typeId="+this.editVideoTypeForm.typeId).then(result => {
          editVideoTypeListLoading.close();
          this.getVideoTypeList()
          this.editVideoTypeVisible = false
        }).catch(function (error) {
          editVideoTypeListLoading.close();
          message.error(error.response.data)
          if (error.response.status === 401) window.location.href = "../login.html";
          this.editVideoTypeVisible = false
        });
      },
      getVideoTypeList: function () {
        const getVideoTypeListLoading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get('../getVideoTypeList').then(result => {
          getVideoTypeListLoading.close();
          this.videoTypeList = result.data;
        }).catch(function (error) {
          getVideoTypeListLoading.close();
          message.error(error.response.data)
          if (error.response.status === 401) window.location.href = "../login.html";

        });
      },
      searchVideo: function () {
        window.location.href = "search.html?keyword=" + this.keyword;
      },
      //获取当前用户
      getCurrentUser: function () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios.get("../getCurrentUser")
          .then(result => {
            loading.close();
            this.currentUser = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },
      videoTypeManager: function () {
        this.videoTypeVisible = true;
        this.getVideoTypeList()
      },
      addVideoTypeManager: function () {
        this.addVideoTypeVisible = true;
      },
      editVideoTypeManager: function (index, tableData) {
        this.editVideoTypeForm = JSON.parse(JSON.stringify(tableData[index]));
        this.editVideoTypeVisible = true;
      },
      //获取所有
      getAllVideo: function () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios.get("../getVideoListManager?keyword=" + this.keyword + "&pageNo=" + this.pageNo)
          .then(result => {
            loading.close();
            this.videoList = result.data;
            this.pageNo = this.videoList.pageNo;
            this.maxPage = this.videoList.maxPageNo;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },
      //翻页操作
      pageOper: function (type) {
        let newPage = this.pageNo;
        if (type === "min") {
          newPage = 1
        } else if (type === "up") {
          newPage = newPage - 1;
          if (newPage < 1) {
            newPage = 1;
          }
        } else if (type === "down") {
          newPage = newPage + 1;
          if (newPage > this.maxPage) {
            newPage = this.maxPage;
          }
        } else if (type === "max") {
          newPage = this.maxPage;
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios.get("../getVideoListManager?keyword=" + this.keyword + "&pageNo=" + newPage)
          .then(result => {
            loading.close();
            this.videoList = result.data;
            this.pageNo = this.videoList.pageNo;
            this.maxPage = this.videoList.maxPageNo;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },

      //根据字段名搜索
      /*   searchAccount: function () {
             let keyword = this.account;
             if (keyword === "") {
                 return;
             }
             ;
             axios
                 //.get('../queryUserInfoColumnByKeyword?column=account&keyword=' + keyword)
                 .then(result => {
                     this.dataArray = eval(result.data)
                 })
                 .catch(function (error) {
                     message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
                 });
         },*/
      //修改视频状态
      editRole: function (id, value) {

        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        axios.get("../updateVideo?vid=" + id + "&status=" + value)
          .then(result => {
            loading.close();
            message.success("更新成功")
          }).catch(function (error) {
          loading.close();
          message.error(error.response.data);
          if (error.response.status === 401) window.location.href = "../login.html";
        })
      },
    },
    mounted() {
      message = this.$message
      this.getCurrentUser();
      this.getAllVideo();
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        return year + "-" + month + "-" + date
      },
      //格式化类型
      formatStatus(status) {
        if (status === 0) {
          return "下架";
        } else if (status === 1) {
          return "免费";
        } else if (status === 2) {
          return "VIP";
        }
        return "免费"
      },
      formatType(typeId) {
        if (typeId === 1) {
          return "JavaSE";
        } else if (typeId === 2) {
          return "Web";
        } else if (typeId === 3) {
          return "MySQL";
        } else if (typeId === 4) {
          return "JavaWeb";
        }
        return "未知"
      },
    }
  });

  //编辑信息
  function edit(td) {
    //获取旧文本
    let old = td.innerText;
    //获取修改的类型
    let type = td.getAttribute('editType');
    //获取用户的id
    vid = td.parentNode.getAttribute("vid");
    if (type === "videoName") {
      td.innerHTML = "<input type='text' size='20' style='width:80%;'>";
    } else {
      return;
      //修改其他
      td.innerHTML = "<input type='text' size='20' style='width:80%;'>";
    }
    let input = td.firstChild;

    input.value = old;
    input.select();
    //绑定输入框失去焦点事件,更新
    input.onblur = function () {
      update(this, old, type);
    }
  }

  /**
   * 失去焦点，更新
   */
  function update(input, old, type) {
    let newText = input.value;
    //input的父节点是td
    let TD = input.parentNode;

    if (!newText) {
      message.error('您的输入为空，修改失败！');
      TD.innerText = old;
      return;
    }

    const loading = this.$loading({
      lock: true,
      text: 'Loading...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    axios.get("../videoInfoUpdate?vid=" + vid + "&editType=" + type + "&newText=" + newText)
      .then(result => {
        loading.close();
        TD.innerText = newText;
        if (newText != old) {
          message.success("更新成功")
        }
      }).catch(function (error) {
      loading.close();
      TD.innerText = old;
      message.error(error.response.data);
      if (error.response.status === 401) window.location.href = "../login.html";
    })
  }
</script>
</html>
